<template>
  <!-- 人物选择 -->
  <div>
    <el-row class="search_prod seaheaad">
      <el-col :span="24">
        <el-form :inline="true" :model="search" class="search_prod tl" @submit.native.prevent>
          <el-form-item label="标题：">
            <el-input size="small" clearable v-model="search.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="分类：">
            <el-select v-model="search.cate_id" placeholder="请选择">
              <el-option v-for="item in charList" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-row class="tl">
              <el-col :span="24">
                <el-button :loading="$store.state.isLoading" size="small" class="top_weiy" type="primary" @click="onSubmit">查询</el-button>
                <el-button :loading="$store.state.isLoading" size="small" class="top_weiy" type="primary" @click="delSubmit">一键清除</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list.data" stripe header-row-class-name="head_color" tooltip-effect="dark"
      style="width: 99.9%;margin-top: 20px;">
      <el-table-column label="头像" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="user_table">
            <img :src="$fnc.getImgUrl(scope.row.avatar)" style="width:80px;height:80px;border-radius:50%;" alt />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="人物详情" min-width="80">
        <template slot-scope="scope">
          <div class="user_table">
            <span>标题：</span>
            <small>{{ scope.row.title || "----" }}</small>
            <br />
            <span>简介：</span>
            <small>{{ scope.row.introduction || "----" }}</small>
            <br />
            <span>分类：</span>
            <small>{{ scope.row.cate_id_cn}}</small>
            <br />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="信息详情" align="center" min-width="100">
        <template slot-scope="scope">
          <div class="user_table">
            <span>学习人数：</span>
            <small>{{ scope.row.pv||0 }}</small>
            <br />
            <span>粉丝数：</span>
            <small>{{ scope.row.fan||0 }}</small>
            <br />
            <span>作品数：</span>
            <small>{{ scope.row.works||0}}</small>
            <br />
            <span>点赞数：</span>
            <small>{{ scope.row.likes||0 }}</small>
            <br />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="添加时间" align="center" min-width="120">
        <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template slot-scope="scope">
          <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="list.all_num">
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: {},
        pageSize: 10,
        currentPage1: 1,
        loading: false,
        charList: [], //分类
        search: {
          title: "",
          cate_id: ""
        }
      };
    },
    components: {},
    methods: {
      addShops(row){
        //添加
        this.$emit("info",row,false);
      },
      getNewsAll(data) {
        this.loading = true;
        var params = {};
        data = data || {};
        params = data;
        this.$api.getCharacter.getCharacterList(params).then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.result;
          }
          this.loading = false;
        });
      },
      getCharacterNewsAll() {
        this.$api.getCharacter.getCharacterCateList().then((res) => {
          if (res.data.code == 200) {
            this.charList = res.data.result;
          }
          this.loading = false;
        });
      },
      handleSizeChange(val) {
        var params = this.searchAll;
        params.page = "";
        params.page_size = val;
        this.getNewsAll(params);
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        var params = this.searchAll;
        params.page = val;
        params.page_size = this.pageSize;
        this.getNewsAll(params);
      },
      delSubmit() {
        this.search = {
          title: "",
          cate_id: ""
        };
        this.getNewsAll(this.search)
      },
      onSubmit() {
        this.getNewsAll(this.search)
      }
    },
    created() {
      this.getNewsAll();
      this.getCharacterNewsAll();
    },
  };
</script>

<style lang="less" scoped>
  .myblank button {
    margin: 5px 5px 0 0;
  }

  .tab_div>div {
    margin: 0 auto;
  }
</style>
